<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .zt2-table {
            position: relative;
            width: 200px;
        }

        .progress-bar-container {
            width: 100%;
            background-color: #f3f3f3;
            border-radius: 25px;
            overflow: hidden;
            height: 30px;
        }

        .progress-bar {
            height: 100%;
            width: 0%;
            background-image: linear-gradient(to right, rgb(0, 195, 255) 0%, rgb(0, 165, 255) 100%);
            text-align: center;
            line-height: 5px;
            color: white;
            border-radius: 25px;
            transition: width 0.5s ease;
        }

        #percentage {
            text-align: right;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
            color: black;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <td class="zt2-table">
            <div class="progress-bar-container">
                <div class="progress-bar" id="progress-bar"></div>
            </div>
            <span id="percentage">0%</span>
        </td>
    </tr>
</table>

<script>
    function updateProgress(value) {
        let percentage = (value / 1000) * 100;
        const progressBar = document.getElementById('progress-bar');
        progressBar.style.width = percentage + '%';

        const percentageText = document.getElementById('percentage');
        percentageText.textContent = percentage.toFixed(1) + '%';
    }

    // 假设你要将 `233` 作为进度值更新进度条
    updateProgress(233);
</script>

</body>
</html>
